<template>
    <div>
        <headers></headers>   
        <div class="app-basement">
            <div class="content-basement ">
                <div class="border" :style="{width:'100%'}">
                    <pdf
                        ref="pdf"
                        :src="url"
                        v-for="i in numPages"
                        :key='i'
                        :page="i"
                    ></pdf>
                </div>
            </div>
        </div>
        <div class="app-basement" style="position:absolute;">
            <div class="content-basement ">
                
            </div>
        </div>
        <footers></footers>
    </div>
</template>

<script>
import headers from '@/components/header'
import footers from '@/components/footer'
import pdf from 'vue-pdf'
import {mapGetters} from 'vuex'
export default {
    components:{headers,footers,pdf},
    computed:{...mapGetters(['http'])},
    data(){
        return {
            numPages:5,
            url:'', 
            disabled:false,
            loading:false
        }
    },
    created() {
        // this.url = '/path'+this.$route.query.src.split('com')[1]
        this.url = this.$route.query.src
        this.getNumPages()
    },
    methods: {
        //无限滚动
        load () {
            if(this.numPages+1>this.pagenum){
                this.disabled=true
            }else{
                this.disabled=false
                this.numPages += 1
            }
        },
        async getNumPages() {
            let loadingTask = pdf.createLoadingTask(this.url)
            this.loading=true
            await loadingTask.promise.then(pdf => {
                this.pagenum = pdf.numPages
            }).catch(err => {
                console.error('pdf 加载失败', err);
            })
            this.loading=false
        },
    },
}
</script>

<style lang="scss" scoped>
.border{
    border:1px solid #eee;
}
</style>